<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue-2.4.0.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- .v-model 数据双向绑定 绑定表单的控件-->
      <!-- 如果不用v-model的话只能获取到默认的val值 -->
      <input type="text" :value="value" />
      <button @click="getval">获取数值</button>

      <!-- 用了v-model之后就可以实现数据互通 -->
      <input type="text" v-model:value="value1" />
      <!-- 简写的话直接省略  ：value -->
      <input type="text" v-model="value2" />

      <input type="text" v-mode="first" />
      <select name="" id="">
        <option value="">+</option>
        <option value="">-</option>
        <option value="">*</option>
        <option value="">/</option>
      </select>

      <input type="text" v-model="second" />
      <button @click="add">=</button>
      <input type="text" v-model="end" />
    </div>
  </body>
  <script>
    let vm = new Vue({
      el: "#app",
      data: {
        value: "12312313",
        value1: "789",
        value2: "真好",
        first: "",
        second: "",
        end: "",
      },
      methods: {
        add() {
          this.end = Number(this.first) + Number(this.second);
        },
        getVal() {
          console.log(this.value1);
          console.log(this.value);
        },
      },
    });
  </script>
</html>
